<template>
  <view class="submit_order_com">
    <view class="block"></view>
    <view class="submit_bar">
      <view
        v-if="!$store.getters.domainPrefix || $store.getters.domainPrefix === ''"
        class="bar_btn"
        @click="
          navSwitch(
            '/pages/index/store/index?domainPrefix=' + value.domainPrefix
          )
        "
      >
        <image
          class="btn_icon"
          src="http://img.druglots.cn/image/store.png"
        ></image>
        <view class="text u-line-1">{{ $t('locales.enterStore') }}</view>
      </view>

      <view class="bar_btn" @click="contact()">
        <image
          class="btn_icon"
          src="http://img.druglots.cn/image/phone.png"
        ></image>
        <view class="text u-line-1">{{ $t('locales.contactMerchants') }}</view>
      </view>

      <view
        class="btn sp_car u-line-1"
        v-if="value.availableQty !== 0 && value.goodsStatus === 1 && !routerParams.purchaseId"
        @click="getSkuInfo(2)"
      >
        {{ $t('locales.addCart') }}
      </view>

      <view
        class="btn imm_pay u-line-1"
        v-if="value.availableQty !== 0 && value.goodsStatus === 1"
        @click="getSkuInfo(1)"
      >
        {{ $t('locales.buyNow') }}
      </view>

      <view class="btn imm_payline u-line-1" v-if="value.goodsStatus === 0">
        <!-- {{ $t('locales.goodsSellOut') }} -->
        {{ $t('locales.goodsDetailInvalid') }}
      </view>

      <view class="btn imm_payline u-line-1" v-if="value.availableQty === 0">
        {{ $t('locales.goodsSellOut') }}
      </view>
    </view>

    <SpecsPopup v-model="show" :data="value" :type="placeOrderType" :sku-info="skuInfo" :routerParams="routerParams" />
  </view>
</template>

<script>
import SpecsPopup from '@/components/specsPopup'
import { getGoodsSkuList } from '@/api/http/order'
import { getStoreContactWay } from '@/api/http/store'
export default {
  components: {
    SpecsPopup
  },
  props: {
    value: {
      type: Object,
      default: () => {}
    },

    isOpenFormat: {
      type: Number,
      default: 0
    },

    routerParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      skuInfo: {},
      placeOrderType: '',
      Contactshow: false,
    }
  },

  watch: {
    value: {
      deep: true,
      handler() {
        if (this.isOpenFormat) {
          this.getSkuInfo(2)
        }
      }
    }
  },

  mounted() {
    if (this.isOpenFormat) {
      if (this.value.id) {
        this.getSkuInfo(2)
      }
      
    }
  },

  methods: {
    getSkuInfo(type) {
      if (!this.$store.getters.isLogin) {
        uni.navigateTo({
          url: '/pages/user/login/index'
        })
        return
      }

      if (this.value.priceDisplay === 2) return

      this.getGoodsSkuList(type)
    },
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },

    async getGoodsSkuList(type) {
      const res = await getGoodsSkuList({
        'id': this.value.id
      })

      if (res.code === 200) {
        this.skuInfo = res.data

        // 加入购物车 2 立即购买 1
        this.placeOrderType = type
        this.show = !this.show
      } else {
        uni.showToast({
          title: res.message,
          icon: 'none'
        })
      }
    },

    // 联系商家
    contact() {
      getStoreContactWay({
        domainPrefix: this.value.domainPrefix // this.$store.getters.domainPrefix
          ? this.value.domainPrefix // this.$store.getters.domainPrefix
          : null
      }).then((res) => {
        if (res.code === 200) {
          uni.showModal({
            content: this.$t('locales.contactInfo') + '：' + res.data.contactInfo,
            showCancel: false,
            confirmText: this.$t('locales.roger'),
            confirmColor: '#0049AC',
            success: (res) => {}
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit_order_com {
  .block {
    width: 100%;
    height: 98rpx;
  }
  .submit_bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 98rpx;
    box-sizing: border-box;
    display: flex;
    background-color: #fff;
    border-top: 1px solid #dddddd;
    .bar_btn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 124rpx;
      height: 98rpx;
      border-right: 1px solid #dddddd;
      .btn_icon {
        width: 40rpx;
        height: 40rpx;
      }
      .text {
        width: 124rpx;
        padding: 0 10rpx;
        box-sizing: border-box;
        margin-top: 6rpx;
        color: #545454;
        font-size: 20rpx;
        text-align: center;
      }
    }
    .btn {
      height: 98rpx;
      line-height: 98rpx;
      text-align: center;
      color: #fff;
      padding: 0 15rpx;
      box-sizing: border-box;
    }
    .sp_car {
      width: 290rpx;
      background-color: #6692CD;
    }
    .imm_pay {
      flex: 1;
      background-color: #0049AC;
    }
    .imm_payline {
      flex: 1;
      background-color: #bebebe;
    }
  }
}
</style>
